<template>
  <view class="basic-container">
    <!-- 页面标题 -->
    <view class="page-header">
      <view class="header-left" @click="goBack">
        <u-icon name="arrow-left" color="#ffffff" size="20"></u-icon>
        <text class="header-title">基础信息</text>
      </view>
      <view class="group-name">{{ currentGroup.name }}</view>
    </view>

    <!-- 信息表单卡片 -->
    <view class="form-card animate-card">
      <view class="card-title">
        <view class="title-left">
          <u-icon name="edit-pen" size="18" color="#3c7eff"></u-icon>
          <text>集团单位基础信息</text>
        </view>
        <view class="info-status" v-if="formData.id">
          <u-tag text="已保存" type="success" size="mini" />
        </view>
      </view>

      <view class="form-content">
        <view class="form-row">
          <view class="form-item">
            <view class="form-label">
              单位人数
              <text class="required-mark">*</text>
            </view>
            <view class="form-input-wrap">
              <input
                v-model="formData.totalMembers"
                type="number"
                placeholder="请输入单位总人数"
                @input="checkTotalMembers"
                class="form-input"
              />
            </view>
          </view>

          <view class="form-item">
            <view class="form-label">
              本网成员人数
              <text class="required-mark">*</text>
            </view>
            <view class="form-input-wrap">
              <input
                v-model="formData.networkMembers"
                type="number"
                placeholder="请输入本网成员人数"
                @input="calculateNetworkShare"
                class="form-input"
              />
            </view>
          </view>
        </view>

        <view class="form-row">
          <view class="form-item">
            <view class="form-label">
              5G成员数
              <text class="required-mark">*</text>
            </view>
            <view class="form-input-wrap">
              <input
                v-model="formData.members5G"
                type="number"
                placeholder="请输入5G成员数"
                @input="validateMemberCounts"
                class="form-input"
              />
            </view>
          </view>

          <view class="form-item">
            <view class="form-label">
              宽带成员数
              <text class="required-mark">*</text>
            </view>
            <view class="form-input-wrap">
              <input
                v-model="formData.broadbandMembers"
                type="number"
                placeholder="请输入宽带成员数"
                @input="validateMemberCounts"
                class="form-input"
              />
            </view>
          </view>
        </view>

        <view class="form-row">
          <view class="form-item">
            <view class="form-label">
              5G终端成员数
              <text class="required-mark">*</text>
            </view>
            <view class="form-input-wrap">
              <input
                v-model="formData.terminal5GMembers"
                type="number"
                placeholder="请输入5G终端成员数"
                @input="validateMemberCounts"
                class="form-input"
              />
            </view>
          </view>

          <view class="form-item" v-if="isLowQuality == 1">
            <view class="form-label">
              <text>方案递送状态</text>
              <u-tag text="低质态" type="warning" size="mini" style="margin-left: 5px;" />
            </view>
            <view class="form-input-wrap switch-wrapper">
              <switch
                :checked="formData.deliveredPlan == 1"
                @change="(e)=>formData.deliveredPlan = e.detail.value ? 1 : 0"
                class="switch-custom"
                color="#3c7eff"
              ></switch>
            </view>
          </view>
        </view>

        <view class="network-share-section">
          <view class="share-title">本网份额</view>
          <view class="network-share-info">
            <text class="share-value" :style="{color: getShareColor()}">{{ networkShare }}%</text>
            <view class="share-bar">
              <view
                class="share-progress"
                :style="{ width: networkShare + '%', backgroundColor: getShareColor() }"
              ></view>
            </view>
          </view>
        </view>

        <view class="form-tip" v-if="isLowQuality == 1">
          <u-icon name="info-circle" size="14" color="#ff9900"></u-icon>
          <text>本网份额低于45%的集团单位需要递送方案</text>
        </view>
      </view>

      <view class="form-footer">
        <button class="save-btn" :loading="loading" @tap="saveBasicInfo">保存信息</button>
      </view>
    </view>

    <!-- 网络图表卡片 -->
    <view class="chart-card animate-card">
      <view class="card-title">
        <view class="title-left">
          <u-icon name="pie-chart" size="18" color="#3c7eff"></u-icon>
          <text>网络渗透率</text>
        </view>
      </view>

      <view class="chart-grid">
        <view class="chart-item">
          <view class="ring-chart">
            <view class="ring-chart-inner">
              <view class="ring-chart-bg">
                <view
                  class="ring-chart-progress"
                  :style="{ 
                    background: `conic-gradient(#3c7eff 0%, #3c7eff ${getNetworkRatio()}%, transparent ${getNetworkRatio()}%, transparent 100%)` 
                  }"
                ></view>
                <view class="ring-chart-center">
                  <text class="ring-value">{{ networkShare }}%</text>
                  <text class="ring-label">本网份额</text>
                </view>
              </view>
            </view>
            <view class="chart-desc">
              <text
                class="desc-value"
              >{{ formData.networkMembers || 0 }}/{{ formData.totalMembers || 0 }}</text>
              <text class="desc-label">本网成员/总人数</text>
            </view>
          </view>
        </view>

        <view class="chart-item">
          <view class="ring-chart">
            <view class="ring-chart-inner">
              <view class="ring-chart-bg">
                <view
                  class="ring-chart-progress"
                  :style="{ 
                    background: `conic-gradient(#19be6b 0%, #19be6b ${get5GRatio()}%, transparent ${get5GRatio()}%, transparent 100%)` 
                  }"
                ></view>
                <view class="ring-chart-center">
                  <text class="ring-value">{{ ratio5G }}%</text>
                  <text class="ring-label">5G渗透率</text>
                </view>
              </view>
            </view>
            <view class="chart-desc">
              <text
                class="desc-value"
              >{{ formData.members5G || 0 }}/{{ formData.networkMembers || 0 }}</text>
              <text class="desc-label">5G成员/本网成员</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 发展建议卡片 -->
    <view class="suggestion-card animate-card" v-if="isLowQuality || showSuggestions">
      <view class="card-title">
        <view class="title-left">
          <u-icon name="hourglass" size="18" color="#3c7eff"></u-icon>
          <text>发展建议</text>
        </view>
      </view>

      <view class="suggestion-content">
        <view class="suggestion-item" v-if="isLowQuality">
          <u-icon name="warning" size="18" color="#ff9900"></u-icon>
          <text class="suggestion-text">当前集团单位为低质态集团，建议尽快递送发展方案</text>
        </view>

        <view class="suggestion-item" v-if="ratio5G < 30">
          <u-icon name="info-circle" size="18" color="#3c7eff"></u-icon>
          <text class="suggestion-text">5G渗透率较低，建议加强5G业务推广</text>
        </view>

        <view
          class="suggestion-item"
          v-if="formData.broadbandMembers && formData.networkMembers && (formData.broadbandMembers / formData.networkMembers * 100 < 40)"
        >
          <u-icon name="info-circle" size="18" color="#3c7eff"></u-icon>
          <text class="suggestion-text">宽带业务渗透率较低，建议开展宽带促销活动</text>
        </view>

        <view
          class="suggestion-item"
          v-if="formData.terminal5GMembers && formData.members5G && (formData.terminal5GMembers / formData.members5G * 100 < 50)"
        >
          <u-icon name="info-circle" size="18" color="#3c7eff"></u-icon>
          <text class="suggestion-text">5G终端渗透率较低，建议推广5G终端补贴活动</text>
        </view>
      </view>

      <view class="suggestion-footer">
        <button class="report-btn" @click="generateReport">生成分析报告</button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      groupId: "",
      currentGroup: {},
      loading: false,
      formData: {
        id: "",
        totalMembers: "",
        networkMembers: "",
        members5G: "",
        broadbandMembers: "",
        terminal5GMembers: "",
        deliveredPlan: false
      },
      showSuggestions: true
    };
  },
  computed: {
    // 计算本网份额
    networkShare() {
      if (
        !this.formData.totalMembers ||
        !this.formData.networkMembers ||
        this.formData.totalMembers === "" ||
        this.formData.networkMembers === ""
      ) {
        return 0;
      }

      const share = (
        (this.formData.networkMembers / this.formData.totalMembers) *
        100
      ).toFixed(1);
      return parseFloat(share);
    },

    // 计算5G渗透率
    ratio5G() {
      if (
        !this.formData.networkMembers ||
        !this.formData.members5G ||
        this.formData.networkMembers === "" ||
        this.formData.members5G === ""
      ) {
        return 0;
      }

      const ratio = (
        (this.formData.members5G / this.formData.networkMembers) *
        100
      ).toFixed(1);
      return parseFloat(ratio);
    },

    // 判断是否为低质态集团
    isLowQuality() {
      return this.networkShare <= 45 ? 1 : 0;
    }
  },
  onLoad(options) {
    console.log("basic页面onLoad", options);
    if (options && options.groupCode) {
      this.groupId = options.groupCode;
      this.getGroupInfo();
      this.getBasicInfo();
    } else {
      uni.showToast({
        title: "缺少集团信息",
        icon: "none"
      });
      this.goBack();
    }
  },
  methods: {
    // 返回上一页
    goBack() {
      uni.navigateBack();
    },

    // 获取集团信息
    getGroupInfo() {
      // 显示加载中
      uni.showLoading({
        title: "加载中..."
      });

      // 通过集团编码获取集团详情
      this.$http
        .sendRequest("zhanke/group_detail", "POST", {
          groupCode: this.groupId
        })
        .then(res => {
          uni.hideLoading();

          if (res.data && res.data.code === 200) {
            const detail = res.data.data;

            // 更新集团信息
            this.currentGroup = {
              name: detail.name,
              code: detail.code,
              industry: detail.industry,
              district: detail.district,
              manager: detail.manager
            };
          } else {
            uni.showToast({
              title: res.data.msg || "获取集团信息失败",
              icon: "none"
            });

            // 使用默认数据
            this.currentGroup = {
              name: "未知集团",
              industry: "未分类"
            };
          }
        })
        .catch(err => {
          uni.hideLoading();
          console.error("获取集团信息失败", err);

          // 使用默认数据
          this.currentGroup = {
            name: "未知集团",
            industry: "未分类"
          };

          uni.showToast({
            title: "网络请求失败，请重试",
            icon: "none"
          });
        });
    },

    // 获取基础信息
    getBasicInfo() {
      // 显示加载提示
      uni.showLoading({
        title: "加载中..."
      });

      // 调用接口获取基础信息
      this.$http
        .sendRequest("zhanke/group_detail", "POST", {
          groupCode: this.groupId
        })
        .then(res => {
          uni.hideLoading();

          if (res.data && res.data.code === 200) {
            const detail = res.data.data;

            // 从API返回数据中填充表单
            this.formData = {
              id: detail.id || "basic_" + this.groupId,
              totalMembers: detail.totalMembers || "",
              networkMembers: detail.networkMembers || "",
              members5G: detail.members5G || "",
              broadbandMembers: detail.broadbandMembers || "",
              terminal5GMembers: detail.terminal5GMembers || "",
              deliveredPlan: detail.planDelivered || false
            };
          } else {
            console.log("接口返回错误或无数据，使用模拟数据");
            // 使用模拟数据作为备用
            this.useSimulatedData();
          }
        })
        .catch(err => {
          uni.hideLoading();
          console.error("获取基础信息失败", err);

          // 接口调用失败时使用模拟数据
          this.useSimulatedData();

          uni.showToast({
            title: "网络请求失败，已加载缓存数据",
            icon: "none"
          });
        });
    },

    // 使用模拟数据（作为备用）
    useSimulatedData() {
      // 尝试从本地存储中获取
      try {
        const storedData = uni.getStorageSync("basicInfo_" + this.groupId);
        if (storedData) {
          this.formData = JSON.parse(storedData);
          return;
        }
      } catch (e) {
        console.error("读取本地存储失败", e);
      }

      // 本地存储无数据时使用默认模拟数据
      this.formData = {
        id: "basic_" + this.groupId,
        totalMembers: "120",
        networkMembers: "45",
        members5G: "25",
        broadbandMembers: "18",
        terminal5GMembers: "15",
        deliveredPlan: true
      };
    },

    // 计算本网份额
    calculateNetworkShare() {
      // 本方法仅用于表单输入时实时计算，实际值由computed属性提供
      // 处理输入时可以添加额外的验证逻辑

      // 处理清空输入的情况
      if (
        this.formData.networkMembers === "" ||
        this.formData.networkMembers === null
      ) {
        return; // 输入框为空时不做处理，由computed属性networkShare返回0
      }

      // 确保进行数字比较
      const networkMembers = Number(this.formData.networkMembers);
      const totalMembers = Number(this.formData.totalMembers);

      // 只有当两者都是有效数字且网络成员数大于总人数时才提示错误
      if (
        !isNaN(networkMembers) &&
        !isNaN(totalMembers) &&
        networkMembers > totalMembers &&
        totalMembers > 0
      ) {
        uni.showToast({
          title: "本网成员数不能大于总人数",
          icon: "none"
        });
        this.formData.networkMembers = this.formData.totalMembers;
      }
    },

    // 保存基础信息
    saveBasicInfo() {
      // 表单验证

      if (!this.formData.totalMembers) {
        uni.showToast({
          title: "请输入单位总人数",
          icon: "none"
        });
        return;
      }

      if (!this.formData.networkMembers) {
        uni.showToast({
          title: "请输入本网成员人数",
          icon: "none"
        });
        return;
      }

      if (!this.formData.members5G) {
        uni.showToast({
          title: "请输入5G成员数",
          icon: "none"
        });
        return;
      }

      if (!this.formData.broadbandMembers) {
        uni.showToast({
          title: "请输入宽带成员数",
          icon: "none"
        });
        return;
      }

      if (!this.formData.terminal5GMembers) {
        uni.showToast({
          title: "请输入5G终端成员数",
          icon: "none"
        });
        return;
      }

      // 再次验证各类成员数是否超过单位总人数
      if (this.formData.totalMembers) {
        const totalMembers = Number(this.formData.totalMembers);

        // 验证本网成员数
        if (
          this.formData.networkMembers &&
          Number(this.formData.networkMembers) > totalMembers
        ) {
          uni.showToast({
            title: "本网成员数不能大于单位总人数",
            icon: "none"
          });
          return;
        }

        // 验证5G成员数
        if (
          this.formData.members5G &&
          Number(this.formData.members5G) > totalMembers
        ) {
          uni.showToast({
            title: "5G成员数不能大于单位总人数",
            icon: "none"
          });
          return;
        }

        // 验证宽带成员数
        if (
          this.formData.broadbandMembers &&
          Number(this.formData.broadbandMembers) > totalMembers
        ) {
          uni.showToast({
            title: "宽带成员数不能大于单位总人数",
            icon: "none"
          });
          return;
        }

        // 验证5G终端成员数
        if (
          this.formData.terminal5GMembers &&
          Number(this.formData.terminal5GMembers) > totalMembers
        ) {
          uni.showToast({
            title: "5G终端成员数不能大于单位总人数",
            icon: "none"
          });
          return;
        }
      }

      // 开始保存
      this.loading = true;

      // 准备提交的数据
      const submitData = {
        id: this.formData.id,
        code: this.groupId,
        totalMembers:
          this.formData.totalMembers === ""
            ? 0
            : Number(this.formData.totalMembers),
        networkMembers:
          this.formData.networkMembers === ""
            ? 0
            : Number(this.formData.networkMembers),
        members5G:
          this.formData.members5G === "" ? 0 : Number(this.formData.members5G),
        broadbandMembers:
          this.formData.broadbandMembers === ""
            ? 0
            : Number(this.formData.broadbandMembers),
        terminal5GMembers:
          this.formData.terminal5GMembers === ""
            ? 0
            : Number(this.formData.terminal5GMembers),
        planDelivered: this.formData.deliveredPlan
      };

      // 调用保存接口
      this.$http
        .sendRequest("zhanke/group_save", "POST", submitData)
        .then(res => {
          this.loading = false;

          if (res.data && res.data.code === 200) {
            // 成功保存到后端
            uni.showToast({
              title: "保存成功",
              icon: "success"
            });

            // 同时保存到本地存储作为缓存
            try {
              uni.setStorageSync(
                "basicInfo_" + this.groupId,
                JSON.stringify(this.formData)
              );
            } catch (e) {
              console.error("本地缓存保存失败", e);
            }

            // 保存成功后延迟返回前一页
            setTimeout(() => {
              this.goBack();
            }, 1500);
          } else {
            // API保存失败，尝试保存到本地
            this.saveToLocalAsBackup();
          }
        })
        .catch(err => {
          this.loading = false;
          console.error("保存基础信息失败", err);

          // 接口调用失败时保存到本地
          this.saveToLocalAsBackup();
        });
    },

    // 将数据保存到本地（作为备用）
    saveToLocalAsBackup() {
      // 生成一个ID
      if (!this.formData.id) {
        this.formData.id = "basic_" + this.groupId;
      }

      // 保存到本地存储
      try {
        uni.setStorageSync(
          "basicInfo_" + this.groupId,
          JSON.stringify(this.formData)
        );

        uni.showToast({
          title: "已保存到本地",
          icon: "success"
        });
      } catch (e) {
        console.error("保存失败", e);
        uni.showToast({
          title: "保存失败，请重试",
          icon: "none"
        });
      }
    },

    // 获取本网份额图表比例
    getNetworkRatio() {
      return this.networkShare;
    },

    // 获取5G渗透率图表比例
    get5GRatio() {
      return this.ratio5G;
    },

    // 获取本网份额颜色
    getShareColor() {
      if (this.networkShare >= 60) {
        return "#19be6b"; // 绿色
      } else if (this.networkShare >= 42) {
        return "#007aff"; // 蓝色
      } else {
        return "#ff9900"; // 橙色
      }
    },

    // 生成分析报告
    generateReport() {
      uni.showToast({
        title: "报告生成中，请稍候",
        icon: "loading",
        duration: 2000
      });

      // 准备提交数据
      const reportData = {
        groupCode: this.groupId,
        networkShare: this.networkShare,
        ratio5G: this.ratio5G,
        isLowQuality: this.isLowQuality
      };

      // 这里可以添加生成报告的API调用
      // 暂时保留模拟过程
      setTimeout(() => {
        uni.showModal({
          title: "分析报告已生成",
          content: `${this.currentGroup.name}的集团分析报告已生成，本网份额为${
            this.networkShare
          }%${this.isLowQuality ? "，属于低质态集团" : ""}，5G渗透率为${
            this.ratio5G
          }%，建议加强业务发展和客户维系工作。`,
          showCancel: false
        });
      }, 2000);
    },

    // 添加单位总人数输入事件处理
    checkTotalMembers() {
      // 处理清空输入的情况
      if (
        this.formData.totalMembers === "" ||
        this.formData.totalMembers === null
      ) {
        return; // 输入框为空时不做处理
      }

      // 确保进行数字比较
      const networkMembers = Number(this.formData.networkMembers);
      const totalMembers = Number(this.formData.totalMembers);

      // 如果本网成员数已经有值，确保总人数不小于本网成员数
      if (
        !isNaN(networkMembers) &&
        !isNaN(totalMembers) &&
        totalMembers < networkMembers &&
        networkMembers > 0
      ) {
        uni.showToast({
          title: "单位总人数不能小于本网成员数",
          icon: "none"
        });
        this.formData.totalMembers = this.formData.networkMembers;
      }

      // 在总人数变化后，检查本网成员数的有效性
      this.calculateNetworkShare();

      // 在总人数变化后，验证所有成员数是否超过总人数
      this.validateMemberCounts();
    },

    // 验证各类成员数不超过单位总人数
    validateMemberCounts() {
      // 如果单位总人数为空，则不进行验证
      if (!this.formData.totalMembers || this.formData.totalMembers === "") {
        return;
      }

      const totalMembers = Number(this.formData.totalMembers);

      // 验证5G成员数
      if (this.formData.members5G && this.formData.members5G !== "") {
        const members5G = Number(this.formData.members5G);
        if (
          !isNaN(members5G) &&
          !isNaN(totalMembers) &&
          members5G > totalMembers
        ) {
          uni.showToast({
            title: "5G成员数不能大于单位总人数",
            icon: "none"
          });
          this.formData.members5G = this.formData.totalMembers;
        }
      }

      // 验证宽带成员数
      if (
        this.formData.broadbandMembers &&
        this.formData.broadbandMembers !== ""
      ) {
        const broadbandMembers = Number(this.formData.broadbandMembers);
        if (
          !isNaN(broadbandMembers) &&
          !isNaN(totalMembers) &&
          broadbandMembers > totalMembers
        ) {
          uni.showToast({
            title: "宽带成员数不能大于单位总人数",
            icon: "none"
          });
          this.formData.broadbandMembers = this.formData.totalMembers;
        }
      }

      // 验证5G终端成员数
      if (
        this.formData.terminal5GMembers &&
        this.formData.terminal5GMembers !== ""
      ) {
        const terminal5GMembers = Number(this.formData.terminal5GMembers);
        if (
          !isNaN(terminal5GMembers) &&
          !isNaN(totalMembers) &&
          terminal5GMembers > totalMembers
        ) {
          uni.showToast({
            title: "5G终端成员数不能大于单位总人数",
            icon: "none"
          });
          this.formData.terminal5GMembers = this.formData.totalMembers;
        }
      }
    }
  }
};
</script>

<style>
.basic-container {
  min-height: 100vh;
  background-color: #f8f9fc;
  padding-bottom: 30px;
}

.page-header {
  background: linear-gradient(135deg, #3c7eff, #2854c5);
  padding: 60px 20px 25px;
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(60, 126, 255, 0.15);
}

.header-left {
  display: flex;
  align-items: center;
}

.header-title {
  font-size: 20px;
  font-weight: 600;
  margin-left: 5px;
}

.group-name {
  font-size: 14px;
  opacity: 0.9;
  margin-top: 10px;
  font-weight: 300;
}

.animate-card {
  animation: slideUp 0.5s ease-out;
  transition: all 0.3s ease;
}

@keyframes slideUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.form-card,
.chart-card,
.suggestion-card {
  margin: 15px;
  padding: 20px;
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(23, 43, 77, 0.05);
  border: 1px solid rgba(228, 233, 242, 0.7);
}

.card-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid #f0f3f9;
}

.title-left {
  display: flex;
  align-items: center;
}

.card-title text {
  font-size: 16px;
  font-weight: 600;
  color: #253858;
  margin-left: 8px;
}

.info-status {
  margin-left: auto;
}

.form-content {
  margin-bottom: 20px;
}

.form-row {
  display: flex;
  margin: 0 -8px 16px;
}

.form-item {
  flex: 1;
  padding: 0 8px;
}

.form-label {
  font-size: 13px;
  color: #5e6c84;
  margin-bottom: 6px;
  font-weight: 500;
  display: flex;
  align-items: center;
}

.form-input-wrap {
  position: relative;
  background-color: #f8f9fc;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(228, 233, 242, 0.7);
  transition: all 0.3s ease;
}

.form-input-wrap:focus-within {
  border-color: #3c7eff;
  box-shadow: 0 0 0 2px rgba(60, 126, 255, 0.1);
}

.form-input {
  height: 40px;
  padding: 0 12px;
  font-size: 14px;
  color: #253858;
  width: 100%;
  background: transparent;
}

.switch-wrapper {
  display: flex;
  align-items: center;
  height: 40px;
  padding: 0 12px;
}

.network-share-section {
  background-color: #f8f9fc;
  padding: 15px;
  border-radius: 8px;
  margin-bottom: 16px;
  border: 1px solid rgba(228, 233, 242, 0.7);
}

.share-title {
  font-size: 13px;
  color: #5e6c84;
  margin-bottom: 10px;
  font-weight: 500;
}

.network-share-info {
  position: relative;
}

.share-value {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 8px;
  display: inline-block;
}

.share-bar {
  height: 8px;
  background-color: #e9ecf3;
  border-radius: 4px;
  overflow: hidden;
  margin-top: 5px;
}

.share-progress {
  height: 100%;
  border-radius: 4px;
  transition: width 0.5s ease;
}

.form-tip {
  display: flex;
  align-items: center;
  padding: 10px 12px;
  background-color: rgba(255, 153, 0, 0.08);
  border-radius: 8px;
  margin-top: 5px;
}

.form-tip text {
  font-size: 13px;
  color: #ff9900;
  margin-left: 6px;
}

.form-footer {
  padding-top: 10px;
}

.save-btn {
  background: linear-gradient(135deg, #3c7eff, #2854c5);
  color: white;
  font-size: 15px;
  font-weight: 500;
  height: 44px;
  line-height: 44px;
  border-radius: 8px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 10px rgba(60, 126, 255, 0.2);
}

.save-btn:active {
  transform: translateY(1px);
  box-shadow: 0 2px 6px rgba(60, 126, 255, 0.2);
}

.chart-grid {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -10px;
}

.chart-item {
  width: 50%;
  padding: 0 10px;
  margin-bottom: 20px;
}

.ring-chart {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.ring-chart-inner {
  width: 120px;
  height: 120px;
  position: relative;
  margin-bottom: 15px;
}

.ring-chart-bg {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
  box-shadow: 0 6px 12px rgba(23, 43, 77, 0.08);
}

.ring-chart-progress {
  width: 100%;
  height: 100%;
  position: absolute;
  border-radius: 50%;
  top: 0;
  left: 0;
  mask: radial-gradient(transparent 55%, #000 56%);
  -webkit-mask: radial-gradient(transparent 55%, #000 56%);
}

.ring-chart-center {
  position: absolute;
  width: 90px;
  height: 90px;
  background-color: #fff;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
}

.ring-value {
  font-size: 20px;
  font-weight: 600;
  color: #253858;
}

.ring-label {
  font-size: 12px;
  color: #5e6c84;
  margin-top: 3px;
}

.chart-desc {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.desc-value {
  font-size: 14px;
  font-weight: 600;
  color: #253858;
  margin-bottom: 4px;
}

.desc-label {
  font-size: 12px;
  color: #5e6c84;
}

.suggestion-content {
  margin-bottom: 20px;
}

.suggestion-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 12px;
  padding: 12px;
  background-color: #f8f9fc;
  border-radius: 8px;
  border: 1px solid rgba(228, 233, 242, 0.7);
}

.suggestion-item u-icon {
  margin-right: 10px;
  margin-top: 2px;
}

.suggestion-text {
  font-size: 14px;
  color: #253858;
  flex: 1;
  line-height: 1.5;
}

.suggestion-footer {
  display: flex;
  justify-content: flex-end;
}

.report-btn {
  background-color: #f8f9fc;
  color: #3c7eff;
  font-size: 14px;
  font-weight: 500;
  height: 36px;
  line-height: 36px;
  border-radius: 18px;
  padding: 0 18px;
  border: 1px solid #3c7eff;
  transition: all 0.3s ease;
}

.report-btn:active {
  background-color: #e9f0ff;
}

.required-mark {
  color: #ff4d4f;
  margin-left: 4px;
  font-size: 14px;
}
</style> 